/*
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-09-07 
 */


import { defineComponent } from 'vue'
import './css/Director.scss'
export default defineComponent({
  name: 'Director',
  props: {
    dir: { type: String, required: true },
    hasDirector: { type: Boolean, required: true }
  },
  setup(props, { emit, slots }) {
    function dirClick(dir) {
      emit('dirClick', dir)
    };
    function renderDom() {
      const { dir, hasDirector } = props;
      return hasDirector ?
        <>
          {
            dir === 'next' ? <div class='director dir-next'>
              <a
                href="javascript:;"
                onClick={dirClick.bind(null, dir)}
              >&gt;</a>
            </div>
              :
              <div class='director dir-prev'>
                <a
                  href="javascript:;"
                  onClick={dirClick.bind(null, dir)}
                >&lt;</a>
              </div>
          }
        </>
        :
        null;
    };
    return () => {
      return (
        <>{renderDom()}</>
      )
    }
  }
})
